<template>
  <div class="card-wrap flex-column justify-end card-padding" v-if="form.receivingInformation">
    <el-form :model="form" ref="receivingInformation" label-width="140px">
      <div class="card-title-wrap">
        <span>收车信息</span>
        <span></span>
      </div>
      <div style="margin: 30px 0; border: 1px solid #ccc;box-sizing: border-box;padding: 10px;border-radius: 8px;" v-for="(item,i) in form.receivingInformation" :key="i">
        <div :style="{marginLeft: (type == 'detail'?'':'0')}">
          <div style="display: flex;justify-content: space-between;align-items: center;width: 80%;">
            <el-form-item label="交付人:" prop="deliveryPeople">
              <span>{{ item.deliveryPeople }}</span>
            </el-form-item>
            <el-form-item label="交付时间:" prop="deliveryTime">
              <span>{{ item.deliveryTime }}</span>
            </el-form-item>
            <el-form-item label="提交人:" prop="createBy">
              <span>{{ item.createBy }}</span>
            </el-form-item>
          </div>
          <el-form-item label="说明:" prop="content">
            <span>{{ item.content?item.content:'--' }}</span>
          </el-form-item>
          <el-form-item label="附件:" prop="attachments">
            <ImageCommon :up-type="2" info="选择附件" v-model="item.attachments" disabled></ImageCommon>
          </el-form-item>
        </div>
        <el-table :data="item.carList" border>
          <el-table-column label="车牌号" align="center" prop="carNo" min-width="120px" show-overflow-tooltip />
          <el-table-column label="车架号" align="center" prop="vinNo" min-width="120px" show-overflow-tooltip />
          <el-table-column label="品牌/车型/车款" align="center" prop="carInFo" min-width="360px" show-overflow-tooltip />
          <el-table-column label="车辆归属" align="center" prop="vehicleOwnerName" min-width="120px" show-overflow-tooltip />
          <el-table-column label="额度申请编号" align="center" prop="calcSchemeCode" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="goToDetail(scope.row.calcSchemeId, scope.row.processId)" style="color: #1890ff; cursor: pointer">{{ scope.row.calcSchemeCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" align="center" prop="orderCarCode" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="orderDetail(scope.row)" style="color: #1890ff; cursor: pointer">{{ scope.row.orderCarCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出租方" align="center" prop="lessorName" min-width="120px" show-overflow-tooltip />
          <el-table-column label="业务类型" align="center" prop="businessType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.business_type" :value="scope.row.businessType" />
            </template>
          </el-table-column>
          <el-table-column label="订单提交人" align="center" prop="orderSubmitter" min-width="120px" show-overflow-tooltip />
          <el-table-column label="GPS状态" v-if="type !== 'detail'" align="center" prop="gpsStatus" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select v-model="scope.row.gpsStatus" placeholder="请选择">
                <el-option v-for="item in GPSlist" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column v-if="type == 'detail'" label="GPS状态" align="center" prop="gpsStatus" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.gpsStatus==1?'正常':'异常'  }}</span>
            </template>
          </el-table-column>

          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnFWF" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="服务费" align="center" prop="serviceCharge" min-width="120px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.serviceCharge) }}</span>
            </template>
          </el-table-column>
          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnGLS" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="公里数" align="center" prop="kilometres" min-width="120px" show-overflow-tooltip />
          <el-table-column label="运输费单价(元/公里/台)" align="center" prop="unitPriceOfFreight" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.unitPriceOfFreight) }}</span>
            </template>
          </el-table-column>

          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnYSF" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="运输费" align="center" prop="priceOfFreight" min-width="120px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.priceOfFreight) }}</span>
            </template>
          </el-table-column>
          <TableCloumn v-if="type !=='detail'" v-for="item  in tableCloumnTT" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="仓储天数" align="center" prop="daysOfStorage" min-width="120px" show-overflow-tooltip />

          <el-table-column label="仓储费单价(元/天/台)" align="center" prop="unitPriceOfStorageFee" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.unitPriceOfStorageFee) }}</span>
            </template>
          </el-table-column>

          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnCCF" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="仓储费" align="center" prop="priceOfStorageFee" min-width="120px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.priceOfStorageFee) }}</span>
            </template>
          </el-table-column>
          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnQTF" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="其他费用" align="center" prop="otherFee" min-width="120px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.otherFee) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="总费用(元)" align="center" prop="totalFee" min-width="150PX" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalFee) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="收车地址" align="center" prop="pickUpAddress" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-if="type !=='detail'" v-model="scope.row.pickUpAddress" placeholder="请输入收车地址" />
              <span v-if="type =='detail'">{{ scope.row.pickUpAddress }}</span>
            </template>
          </el-table-column>

          <el-table-column label="送车地址" align="center" prop="dropOffAddress" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-if="type !=='detail'" v-model="scope.row.dropOffAddress" placeholder="请输入送车地址" />
              <span v-if="type =='detail'">{{ scope.row.dropOffAddress }}</span>
            </template>
          </el-table-column>
          <el-table-column label="付款进度" align="center" prop="status" min-width="100px" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.payment_schedule" :value="scope.row.status" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";

export default {
  // 收车信息
  name: 'receivingInformation',
  dicts: ['business_type', 'payment_schedule'],
  components: {
    SearchContent,
    TableCloumn
  },
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    tableCloumnCCF() {
      return [
        {
          label: "仓储费",
          prop: "priceOfStorageFee",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            if (row.priceOfFreight && row.priceOfStorageFee && row.serviceCharge && row.otherFee) {
              this.$set(row, 'totalFee', Number(row.priceOfFreight) + Number(row.priceOfStorageFee) + Number(row.serviceCharge) + Number(row.otherFee))
            }
          },
        }]
    },
    tableCloumnYSF() {
      return [
        {
          label: "运输费",
          prop: "priceOfFreight",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            if (row.priceOfFreight && row.priceOfStorageFee && row.serviceCharge && row.otherFee) {
              this.$set(row, 'totalFee', Number(row.priceOfFreight) + Number(row.priceOfStorageFee) + Number(row.serviceCharge) + Number(row.otherFee))
            }
          },
        }]
    },
    tableCloumnQTF() {
      return [
        {
          label: "其他费用",
          prop: "otherFee",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            if (row.priceOfFreight && row.priceOfStorageFee && row.serviceCharge && row.otherFee) {
              this.$set(row, 'totalFee', Number(row.priceOfFreight) + Number(row.priceOfStorageFee) + Number(row.serviceCharge) + Number(row.otherFee))
            }
          },
        }]
    },
    tableCloumnFWF() {
      return [
        {
          label: "服务费",
          prop: "serviceCharge",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            if (row.priceOfFreight && row.priceOfStorageFee && row.serviceCharge && row.otherFee) {
              this.$set(row, 'totalFee', Number(row.priceOfFreight) + Number(row.priceOfStorageFee) + Number(row.serviceCharge) + Number(row.otherFee))
            }
          },
        }]
    },
    tableCloumnGLS() {
      return [
        {
          label: "公里数",
          prop: "kilometres",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            this.$set(row, 'priceOfFreight', row.kilometres * row.unitPriceOfFreight)
            if (row.priceOfFreight && row.priceOfStorageFee && row.serviceCharge && row.otherFee) {
              this.$set(row, 'totalFee', Number(row.priceOfFreight) + Number(row.priceOfStorageFee) + Number(row.serviceCharge) + Number(row.otherFee))
            }
          },
        }]
    },
    tableCloumnTT() {
      return [
        {
          label: "仓储天数",
          prop: "daysOfStorage",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            this.$set(row, 'priceOfStorageFee', row.daysOfStorage * row.unitPriceOfStorageFee)
            if (row.priceOfFreight && row.priceOfStorageFee && row.serviceCharge && row.otherFee) {
              this.$set(row, 'totalFee', Number(row.priceOfFreight) + Number(row.priceOfStorageFee) + Number(row.serviceCharge) + Number(row.otherFee))
            }
          },
        }]
    },
    form: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      GPSlist: [
        {
          label: '正常',
          value: 1
        },
        {
          label: '异常',
          value: 2
        }
      ],
      rules: {
        templateRemark: [
          {
            required: true,
            message: '请输入说明',
            trigger: 'change',
          },
        ]
      },
    };
  },
  created() {

  },
  methods: {
    /**
 *额度跳转
 */
    goToDetail(calcSchemeId) {
      this._toPage({
        path: '/quota/ApplyDetails',
        query: {
          calcSchemeId,
        },
      })
    },
    /**
 *订单详情
 */
    orderDetail(row) {
      this._toPage({
        name: "SuborderDetail",
        query: {
          id: row.orderCarId,
          orderCarCode: row.orderCarCode,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
